<template>
	<view id="view1">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view id="xiu2"> 注册账户 </view>
				
		<form @submit="formSubmit">
			<view class="uni-form-item uni-column" id="v1">
				<input class="uni-input" name="phone" placeholder="请输入手机号" />
				<button form-type="submit">获取验证码</button>
			</view>
		</form>
		
		<form @submit="formSubmit2">
			<view class="uni-form-item uni-column gong1" id="v2">
				<input class="uni-input" name="code" placeholder="请输入短信验证码" />
				<text :style="{display:hidden}">验证码错误</text>
			</view>
			<view class="uni-form-item uni-column gong1" id="v3">
				<input class="uni-input" name="password" placeholder="请输入密码（最少8位，数字+字母）" />
				<text :style="{display:hidden2}">密码格式错误</text>
			</view>
			
			<view class="uni-form-item uni-column" id="v4">
				<checkbox-group name="checkbox" @change="checkboxChange">
					<label>
						<checkbox value="checkbox1" />
						<text>
							请阅读并同意《贝壳用户使用协议》及《贝壳用户服务协议》
						</text>
					</label>
				</checkbox-group>
			</view>
			
			<view class="uni-btn-v" id="v5">
				<button form-type="submit" :style="{background:color1}">确定</button>
			</view>
		</form>
		
	</view>
</template>

<script>
	import{
		computed,
		reactive,
		toRefs,
		onMounted,
	} from 'vue';
	import stor from '../../store/index.js'
	import http from "../../utils/http.js";
	
	
	export default {
		setup(){
			let data = reactive({
				hidden:"none",		//display的值
				hidden2:"none",
				color1:"#999",	//确定按钮的颜色
				phone:"",		//手机号
				yan:'1',			//验证码
				// password:'',	//密码
				
				// 获取验证码
				formSubmit: function(e) {
					console.log("获取验证码");					
					if(e.detail.value.phone){
						// 这个转换能让手机号码里面的文字变成nan
						let phone2 = Number(e.detail.value.phone).toString();
						if(phone2.length==10){
							console.log("手机号输入了11位数，接下来要进数据库查询是否与账号下面的号码一样，如果是那就可以修改，如果不是那就提示手机号错误");
							// console.log(stor.state.liujinchang.user);
							data.yan = Math.round(Math.random()*(9999-1000)+1000);
							uni.showModal({
								content: '验证码是：' + data.yan,
								showCancel: false,
							});
							data.phone = phone2;
							
						}else{
							console.log("手机号码不对")
						}
					
					}else{
						console.log("没有手机号");
					}
				},	
				
				
				// 确定提交新密码		
				formSubmit2: function(e) {
					if(data.color1 != "#999"){
						if(e.detail.value.code==data.yan){
							console.log("验证码正确");
							data.hidden = "none";
							// 验证码正确以后,要判断密码是否正确,如果密码格式正确,那就发送请求注册一个用户
							let s1 = Number(e.detail.value.password);
							// console.log(s1);
							// 首先判断长度是否登录8
							if(e.detail.value.password.length>=8){
								console.log("长度够了");
								data.hidden2 = "none";
								// 直接发送请求，这里差个正则来判断是否符合密码格式
								// console.log("---------");
								// console.log(data.phone);
								// console.log(e.detail.value.password);
								// console.log("---------");
								http({
									url:'/login/login2',
									method:'get',
									data:{
										phone:data.phone,
										password:e.detail.value.password
									}
								}).then((res)=>{
									// console.log(res);
									if(res.data.code==200){
										// console.log("注册成功");
										uni.showModal({
											content: '账号是：' + res.data.account,
											showCancel: false,
											success: function (res) {
													if (res.confirm) {
														console.log('用户点击确定');
														uni.redirectTo({
															url:'../login/login'
														})
													}
												}
										});
									}else{
										console.log("注册失败");
										uni.showModal({
											content: '注册失败，请更换手机号',
											showCancel: false,
										});
										
									}
								})	
								
								
								
							}else{
								console.log("密码长度不够");
								data.hidden2 = "inline";
							}
							
							
						}else{
							console.log("验证码错误");
							data.hidden = "inline";
						}	
					}else{
						console.log("还没选择同意用户协议");
					}
				},
				
				// checkbox改变状态后触发的函数
				checkboxChange:function(e){
					if(e.target.value[0]){
						console.log("不是空的");
						data.color1 = "linear-gradient(-90deg, #006FFF, #478EEA)";
					}else{
						data.color1 = "#999";
					}
				}

			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}	
#xiu2{
	text-align: center;
	font-size: 28rpx;
}


page{
	background: #f7f7f7;
}

#view1{
	box-sizing: border-box;
	padding:0 56rpx ;
	margin-top: 24rpx;
	#v1{
		margin-top: 100rpx;
		height: 100rpx;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		input{
			font-size: 28rpx;
			font-weight: bold;
			color: #BFBFBF;
			height: 100rpx;
		}
		button{
			background: none;
			border: none;
			box-shadow: none;
			font-size: 28rpx;
			font-weight: bold;
			color: #7B7B7B;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 0;
			
		}
		button::after{
			border: none;
		}
	}
	.gong1{
		margin-top: 24rpx;
		margin-top: 24rpx;
		border-bottom: 1px solid #ccc;
		input{
			height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #BFBFBF;
		}
	}
	#v2,#v3{
		display: flex;
		align-items: center;
		justify-content: space-between;
		text{
			color: #ed5a65;
			font-size: 28rpx;			
		}
	}
	#v4{
		margin-top: 48rpx;
		label{
			display: flex;
			checkbox{
				margin-right: 12rpx;
				transform:scale(0.7);
				// border-radius: 12rpx;
			}
			text{
				font-size: 24rpx;
				font-weight: bold;
				color: #BFBFBF;
				line-height: 36rpx;
			}
		}
	}
	#v5{
		margin-top: 60rpx;
		button{
			width: 561rpx;
			height: 88rpx;
			// background: linear-gradient(-90deg, #006FFF, #478EEA);
			
			border-radius: 44rpx;
			font-size: 33rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}	
}

</style>
